<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="author" content="Łukasz Holeczek">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>服务开发平台</title>
    <!-- Icons-->
    <link rel="shortcut icon" href="http://training-static.linesno.com/switch_run/favicon.ico" />
    <link th:href="@{/asserts/vendors/@coreui/icons/css/coreui-icons.min.css}" rel="stylesheet">
    
    <link th:href="@{/asserts/vendors/@coreui/icons/css/coreui-icons.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/vendors/flag-icon-css/css/flag-icon.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/vendors/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/vendors/simple-line-icons/css/simple-line-icons.css}" rel="stylesheet">
   
    <!-- datatables --> 
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/vendors/datatables/css/jquery.dataTables.css}">
    
    <!-- Main styles for this application-->
    <link th:href="@{/asserts/css/style.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/custom.css}" rel="stylesheet">
    <link th:href="@{/asserts/vendors/pace-progress/css/pace.min.css}" rel="stylesheet">
    
    <!-- Global site tag (gtag.js) - Google Analytics-->
    <!-- 
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-118965717-3"></script>
     -->
    <style type="text/css">
    	body{
    		font-size:14px ;
    		background: #fafafa;
    	}
		.content-main{
			margin-top:20px;	
		}
	
		
    </style>
    
    <!-- 根路径 -->
	<script type="text/javascript" th:inline="javascript">
	    ctx = /*[[@{/}]]*/ '';
		console.info(ctx);
	</script>
	
  </head>

<body>
	<br/>	
	<!--content area start-->
	<div class="container-fluid">
		<div class="animated fadeIn">
			<div class="row">
				<div class="col-sm-6 col-lg-3">
					<div class="card text-white bg-primary">
						<div class="card-body pb-0">
							<div class="btn-group float-right">
								<button class="btn btn-transparent dropdown-toggle p-0"
									type="button" data-toggle="dropdown" aria-haspopup="true"
									aria-expanded="false">
									<i class="icon-settings"></i>
								</button>
								<div class="dropdown-menu dropdown-menu-right">
									<a class="dropdown-item" href="#">Action</a> <a
										class="dropdown-item" href="#">Another action</a> <a
										class="dropdown-item" href="#">Something else here</a>
								</div>
							</div>
							<div class="text-value">9.823</div>
							<div>访问量</div>
						</div>
						<div class="chart-wrapper mt-3 mx-3" style="height: 70px;">
							<div class="chartjs-size-monitor"
								style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
								<div class="chartjs-size-monitor-expand"
									style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
									<div
										style="position: absolute; width: 1000000px; height: 1000000px; left: 0; top: 0"></div>
								</div>
								<div class="chartjs-size-monitor-shrink"
									style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
									<div
										style="position: absolute; width: 200%; height: 200%; left: 0; top: 0"></div>
								</div>
							</div>
							<canvas class="chart chartjs-render-monitor" id="card-chart1"
								height="140" width="590"
								style="display: block; height: 70px; width: 295px;"></canvas>
						</div>
					</div>
				</div>
				<!-- /.col-->
				<div class="col-sm-6 col-lg-3">
					<div class="card text-white bg-info">
						<div class="card-body pb-0">
							<button class="btn btn-transparent p-0 float-right" type="button">
								<i class="icon-location-pin"></i>
							</button>
							<div class="text-value">9.823</div>
							<div>新下载</div>
						</div>
						<div class="chart-wrapper mt-3 mx-3" style="height: 70px;">
							<div class="chartjs-size-monitor"
								style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
								<div class="chartjs-size-monitor-expand"
									style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
									<div
										style="position: absolute; width: 1000000px; height: 1000000px; left: 0; top: 0"></div>
								</div>
								<div class="chartjs-size-monitor-shrink"
									style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
									<div
										style="position: absolute; width: 200%; height: 200%; left: 0; top: 0"></div>
								</div>
							</div>
							<canvas class="chart chartjs-render-monitor" id="card-chart2"
								height="140" width="590"
								style="display: block; height: 70px; width: 295px;"></canvas>
						</div>
					</div>
				</div>
				<!-- /.col-->
				<div class="col-sm-6 col-lg-3">
					<div class="card text-white bg-warning">
						<div class="card-body pb-0">
							<div class="btn-group float-right">
								<button class="btn btn-transparent dropdown-toggle p-0"
									type="button" data-toggle="dropdown" aria-haspopup="true"
									aria-expanded="false">
									<i class="icon-settings"></i>
								</button>
								<div class="dropdown-menu dropdown-menu-right">
									<a class="dropdown-item" href="#">Action</a> <a
										class="dropdown-item" href="#">Another action</a> <a
										class="dropdown-item" href="#">Something else here</a>
								</div>
							</div>
							<div class="text-value">9.823</div>
							<div>总收入</div>
						</div>
						<div class="chart-wrapper mt-3" style="height: 70px;">
							<div class="chartjs-size-monitor"
								style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
								<div class="chartjs-size-monitor-expand"
									style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
									<div
										style="position: absolute; width: 1000000px; height: 1000000px; left: 0; top: 0"></div>
								</div>
								<div class="chartjs-size-monitor-shrink"
									style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
									<div
										style="position: absolute; width: 200%; height: 200%; left: 0; top: 0"></div>
								</div>
							</div>
							<canvas class="chart chartjs-render-monitor" id="card-chart3"
								height="140" width="654"
								style="display: block; height: 70px; width: 327px;"></canvas>
						</div>
					</div>
				</div>
				<!-- /.col-->
				<div class="col-sm-6 col-lg-3">
					<div class="card text-white bg-danger">
						<div class="card-body pb-0">
							<div class="btn-group float-right">
								<button class="btn btn-transparent dropdown-toggle p-0"
									type="button" data-toggle="dropdown" aria-haspopup="true"
									aria-expanded="false">
									<i class="icon-settings"></i>
								</button>
								<div class="dropdown-menu dropdown-menu-right">
									<a class="dropdown-item" href="#">Action</a> <a
										class="dropdown-item" href="#">Another action</a> <a
										class="dropdown-item" href="#">Something else here</a>
								</div>
							</div>
							<div class="text-value">9.823</div>
							<div>最近一个月</div>
						</div>
						<div class="chart-wrapper mt-3 mx-3" style="height: 70px;">
							<div class="chartjs-size-monitor"
								style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
								<div class="chartjs-size-monitor-expand"
									style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
									<div
										style="position: absolute; width: 1000000px; height: 1000000px; left: 0; top: 0"></div>
								</div>
								<div class="chartjs-size-monitor-shrink"
									style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
									<div
										style="position: absolute; width: 200%; height: 200%; left: 0; top: 0"></div>
								</div>
							</div>
							<canvas class="chart chartjs-render-monitor" id="card-chart4"
								height="140" width="590"
								style="display: block; height: 70px; width: 295px;"></canvas>
						</div>
					</div>
				</div>
				<!-- /.col-->
			</div>
			<!-- /.row-->
			<div class="card">
				<div class="card-body">
					<div class="row">
						<div class="col-sm-5">
							<h4 class="card-title mb-0">访问量</h4>
							<div class="small text-muted">最近三个月</div>
						</div>
						<!-- /.col-->
						<div class="col-sm-7 d-none d-md-block">
							<button class="btn btn-primary float-right" type="button">
								<i class="icon-cloud-download"></i>
							</button>
							<div class="btn-group btn-group-toggle float-right mr-3"
								data-toggle="buttons">
								<label class="btn btn-outline-secondary"> <input
									id="option1" type="radio" name="options" autocomplete="off">
									Day
								</label> <label class="btn btn-outline-secondary active"> <input
									id="option2" type="radio" name="options" autocomplete="off"
									checked=""> Month
								</label> <label class="btn btn-outline-secondary"> <input
									id="option3" type="radio" name="options" autocomplete="off">
									Year
								</label>
							</div>
						</div>
						<!-- /.col-->
					</div>
					<!-- /.row-->
					<div class="chart-wrapper" style="height: 300px; margin-top: 40px;">
						<div class="chartjs-size-monitor"
							style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
							<div class="chartjs-size-monitor-expand"
								style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
								<div
									style="position: absolute; width: 1000000px; height: 1000000px; left: 0; top: 0"></div>
							</div>
							<div class="chartjs-size-monitor-shrink"
								style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
								<div
									style="position: absolute; width: 200%; height: 200%; left: 0; top: 0"></div>
							</div>
						</div>
						<canvas class="chart chartjs-render-monitor" id="main-chart"
							height="600" width="2726"
							style="display: block; height: 300px; width: 1363px;"></canvas>
					</div>
				</div>
			</div>
			<!-- /.card-->
			<!-- /.row-->
			<div class="row">
				<div class="col-md-12">
					<div class="card">
						<div class="card-header">Traffic &amp; Sales</div>
						<div class="card-body">
							<div class="row">
								<div class="col-sm-6">
									<div class="row">
										<div class="col-sm-6">
											<div class="callout callout-info">
												<small class="text-muted">New Clients</small> <br> <strong
													class="h4">9,123</strong>
												<div class="chart-wrapper">
													<canvas id="sparkline-chart-1" width="100" height="30"></canvas>
												</div>
											</div>
										</div>
										<!-- /.col-->
										<div class="col-sm-6">
											<div class="callout callout-danger">
												<small class="text-muted">Recuring Clients</small> <br>
												<strong class="h4">22,643</strong>
												<div class="chart-wrapper">
													<canvas id="sparkline-chart-2" width="100" height="30"></canvas>
												</div>
											</div>
										</div>
										<!-- /.col-->
									</div>
									<!-- /.row-->
									<hr class="mt-0">
									<div class="progress-group mb-4">
										<div class="progress-group-prepend">
											<span class="progress-group-text">Monday</span>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-info" role="progressbar"
													style="width: 34%" aria-valuenow="34" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar bg-danger" role="progressbar"
													style="width: 78%" aria-valuenow="78" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group mb-4">
										<div class="progress-group-prepend">
											<span class="progress-group-text">Tuesday</span>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-info" role="progressbar"
													style="width: 56%" aria-valuenow="56" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar bg-danger" role="progressbar"
													style="width: 94%" aria-valuenow="94" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group mb-4">
										<div class="progress-group-prepend">
											<span class="progress-group-text">Wednesday</span>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-info" role="progressbar"
													style="width: 12%" aria-valuenow="12" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar bg-danger" role="progressbar"
													style="width: 67%" aria-valuenow="67" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group mb-4">
										<div class="progress-group-prepend">
											<span class="progress-group-text">Thursday</span>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-info" role="progressbar"
													style="width: 43%" aria-valuenow="43" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar bg-danger" role="progressbar"
													style="width: 91%" aria-valuenow="91" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group mb-4">
										<div class="progress-group-prepend">
											<span class="progress-group-text">Friday</span>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-info" role="progressbar"
													style="width: 22%" aria-valuenow="22" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar bg-danger" role="progressbar"
													style="width: 73%" aria-valuenow="73" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group mb-4">
										<div class="progress-group-prepend">
											<span class="progress-group-text">Saturday</span>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-info" role="progressbar"
													style="width: 53%" aria-valuenow="53" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar bg-danger" role="progressbar"
													style="width: 82%" aria-valuenow="82" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group mb-4">
										<div class="progress-group-prepend">
											<span class="progress-group-text">Sunday</span>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-info" role="progressbar"
													style="width: 9%" aria-valuenow="9" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar bg-danger" role="progressbar"
													style="width: 69%" aria-valuenow="69" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
								</div>
								<!-- /.col-->
								<div class="col-sm-6">
									<div class="row">
										<div class="col-sm-6">
											<div class="callout callout-warning">
												<small class="text-muted">Pageviews</small> <br> <strong
													class="h4">78,623</strong>
												<div class="chart-wrapper">
													<canvas id="sparkline-chart-3" width="100" height="30"></canvas>
												</div>
											</div>
										</div>
										<!-- /.col-->
										<div class="col-sm-6">
											<div class="callout callout-success">
												<small class="text-muted">Organic</small> <br> <strong
													class="h4">49,123</strong>
												<div class="chart-wrapper">
													<canvas id="sparkline-chart-4" width="100" height="30"></canvas>
												</div>
											</div>
										</div>
										<!-- /.col-->
									</div>
									<!-- /.row-->
									<hr class="mt-0">
									<div class="progress-group">
										<div class="progress-group-header">
											<i class="icon-user progress-group-icon"></i>
											<div>Male</div>
											<div class="ml-auto font-weight-bold">43%</div>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-warning" role="progressbar"
													style="width: 43%" aria-valuenow="43" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group mb-5">
										<div class="progress-group-header">
											<i class="icon-user-female progress-group-icon"></i>
											<div>Female</div>
											<div class="ml-auto font-weight-bold">37%</div>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-warning" role="progressbar"
													style="width: 43%" aria-valuenow="43" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group">
										<div class="progress-group-header align-items-end">
											<i class="icon-globe progress-group-icon"></i>
											<div>Organic Search</div>
											<div class="ml-auto font-weight-bold mr-2">191.235</div>
											<div class="text-muted small">(56%)</div>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-success" role="progressbar"
													style="width: 56%" aria-valuenow="56" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group">
										<div class="progress-group-header align-items-end">
											<i class="icon-social-facebook progress-group-icon"></i>
											<div>Facebook</div>
											<div class="ml-auto font-weight-bold mr-2">51.223</div>
											<div class="text-muted small">(15%)</div>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-success" role="progressbar"
													style="width: 15%" aria-valuenow="15" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group">
										<div class="progress-group-header align-items-end">
											<i class="icon-social-twitter progress-group-icon"></i>
											<div>Twitter</div>
											<div class="ml-auto font-weight-bold mr-2">37.564</div>
											<div class="text-muted small">(11%)</div>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-success" role="progressbar"
													style="width: 11%" aria-valuenow="11" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="progress-group">
										<div class="progress-group-header align-items-end">
											<i class="icon-social-linkedin progress-group-icon"></i>
											<div>LinkedIn</div>
											<div class="ml-auto font-weight-bold mr-2">27.319</div>
											<div class="text-muted small">(8%)</div>
										</div>
										<div class="progress-group-bars">
											<div class="progress progress-xs">
												<div class="progress-bar bg-success" role="progressbar"
													style="width: 8%" aria-valuenow="8" aria-valuemin="0"
													aria-valuemax="100"></div>
											</div>
										</div>
									</div>
								</div>
								<!-- /.col-->
							</div>
							<!-- /.row-->
						</div>
					</div>
				</div>
				<!-- /.col-->
			</div>
			<!-- /.row-->
		</div>
	</div>
	
	<!-- CoreUI and necessary plugins-->
	<script th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>
	<script th:src="@{/asserts/vendors/popper.js/js/popper.min.js}"></script>
	<script th:src="@{/asserts/vendors/bootstrap/js/bootstrap.min.js}"></script>
	<script th:src="@{/asserts/vendors/pace-progress/js/pace.min.js}"></script>
	<script th:src="@{/asserts/vendors/perfect-scrollbar/js/perfect-scrollbar.min.js}"></script>
	<script th:src="@{/asserts/vendors/@coreui/coreui/js/coreui.min.js}"></script>
	
	<!-- Plugins and scripts required by this view-->
	<script th:src="@{/asserts/vendors/chart.js/js/Chart.min.js}"></script>
	<script th:src="@{/asserts/vendors/@coreui/coreui-plugin-chartjs-custom-tooltips/js/custom-tooltips.min.js}"></script>
	<script th:src="@{/asserts/js/main.js}"></script>

</body>
</html>